<template>
  <div>
    <!-- 缺陷分布分析报表 -->
    <el-form class="table_serch">
      <div class="table_serch_labe">
        <div class="table_serch_labe_title">机种编码</div>
        <el-autocomplete
          size="mini"
          popper-class="my-autocomplete"
          class="product"
          style="margin-left: 10px; margin-top: 8px"
          v-model="formInline.recipe"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        >
          <i
            class="el-icon-edit el-input__icon"
            slot="suffix"
            @click="handleIconClick"
          >
          </i>
          <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
            <span class="addr">{{ item.address }}</span>
          </template>
        </el-autocomplete>
      </div>

      <!-- 工业 -->
      <div class="table_serch_labe" style="margin-left: 15px">
        <div class="table_serch_labe_title">工单编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            class="product"
            popper-class="my-autocomplete"
            style="margin-left: 10px"
            v-model="formInline.order"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 15px">
        <div class="table_serch_labe_title">线体编码</div>
        <el-form-item label="">
          <el-autocomplete
            class="product"
            size="mini"
            popper-class="my-autocomplete"
            style="margin-left: 10px"
            v-model="formInline.line"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 15px">
        <div class="table_serch_labe_title">站点编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            class="product"
            popper-class="my-autocomplete"
            style="margin-left: 10px"
            v-model="formInline.site"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 12px">
        <div class="table_serch_labe_title">班次编码</div>
        <el-form-item label="">
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="width: 140px; margin-left: 10px"
            v-model="formInline.class"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </div>

      <div class="table_serch_labe">
        <div class="table_serch_labe_title">起始日期</div>
        <el-form-item label="">
          <el-date-picker
            size="mini"
            v-model="formInline.starttime"
            type="date"
            placeholder="选择日期"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="table_serch_labe">
        <div class="table_serch_labe_title" style="margin-left: 3px">
          结束日期
        </div>
        <el-form-item label="">
          <el-date-picker
            size="mini"
            v-model="formInline.endtime"
            type="date"
            placeholder="选择日期"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 12px">
        <div class="table_serch_labe_title">统计类型</div>
        <el-form-item label="">
          <el-select
            v-model="formInline.type"
            multiple
            placeholder="请选择"
            size="mini"
            style="width: 140px; margin-left: 12px"
          >
            <el-option
              v-for="item in restaurants"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="table_serch_labe" style="margin-left: 20px">
        <el-button type="mini" @click="defectanalysis">查询</el-button>
        <el-button type="mini">刷新</el-button>
        <el-button type="mini">运行</el-button>
      </div>

      <!-- 文件上传 -->
      <div style="margin-left: 15px">
        <el-upload
          ref="uploadExcel"
          action="http://127.0.0.1:2183"
          :limit="limitNum"
          :auto-upload="true"
          accept=".xlsx"
          :before-upload="beforeUploadFile"
          :on-change="fileChange"
          :on-exceed="exceedFile"
          :file-list="formInline.fileList"
        >
          <el-button size="small">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            <!-- 只能上传jpg/png文件，且不超过500kb -->
          </div>
        </el-upload>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isConfirm: true,
      limitNum: 1,
      formInline: {
        recipe: "",
        order: "",
        line: "",
        site: "",
        starttime: "",
        endtime: "",
        errorcode: "",
        class: "",
        type: [],
        filesUrl:'',
        fileList: [],
      },
      restaurants: [],
    };
  },
  mounted() {
    // console.log(this.state2);
    this.restaurants = this.loadAll();
  },
  methods: {
    defectanalysis() {
      if (this.formInline.recipe == "") {
        this.$alert("机种编码不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        this.$socket.emit("defectanalysis", this.formInline);
      }
    },

    loadAll() {
      return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },

    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      if (!this.isConfirm) {
        this.isConfirm = true;
        return;
      }
      this.$confirm("上传文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          console.log("确定上传");
          return true;
        })
        .catch(() => {
          this.$refs.uploadExcel.clearFiles();
          console.log("取消上传");
          return false;
        });

      this.formInline.fileList = fileList.slice(-3);
      // console.log('------------->',this.formInline.fileList)
    },
    //文件上传超出数量
    exceedFile(files, fileList) {
      this.$notify.warning({
        title: "警告",
        message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`,
      });
    },

    // 文件上上传之前的钩子
    beforeUploadFile(file) {
      const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      const size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$notify.warning({
          title: "警告",
          message: `只能上传Excel（即后缀是.xlsx）的文件`,
        });
      }
      if (size > 10) {
        this.$notify.warning({
          title: "警告",
          message: `文件大小不得超过1M`,
        });
      }
    },
  },
};
</script>

<style  scoped>
.table_serch {
  width: 100%;
  min-width: 1000px;
  padding-top: 8px;
  /* border: 1px solid red; */
  background: #fff;
  display: flex;
  flex-wrap: wrap;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}
.el-select {
  height: 10px;
  margin-left: -6px;
}
.product {
  width: 120px;
}
</style>